<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li data-id="1" style="color: red;">1</li>
        <li data-id="2" class="item">2</li>
        <li data-id="3">3</li>
        <li data-id="4">4</li>
        <li data-id="5">5</li>
    </ul>
    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1739258914.56284848.png" alt="">

    <script>
        let li = document.querySelector('li')
        console.dir(li)
        // 通过style直接修改样式
        console.log(li.style.color);
        
        li.style.color = 'yellow'

        // 通过getAttribute 获取元素属性
        // getAttribute('属性名')
        console.log(li.getAttribute('style'));
        console.log(li.nextElementSibling.getAttribute('class'));
        let img = document.querySelector('img')
        console.log(img.getAttribute('src'));
        

        // 设置属性
        // setAttribute('属性名','属性值')
        img.setAttribute('src','https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1729677213.991720.jpg')
        
        console.log(li.getAttribute('data-id'));
        
        
    </script>
</body>
</html>